<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./myvue.js"></script>
    <style>
        #app{
            width:50%;
            height:800px;
            background:rgba(0,23,45,0.5);
            margin:auto;
        }
        p{
            width:80%;
            padding:5px;
            margin:0px;
            color:aqua;
        }
        input{
            width:60%;
            height:40px;
            border-radius:12px;
            padding:10px;
            box-sizing:border-box;
        }
        mark{
            display: inline;
        }
    </style>
</head>
<body>
    <div id="app">
        <center><h4 style="color:cornsilk">模仿vue的小demo</h4></center>
        <mark>a.a</mark><p>{{a.a}}</p>
        <mark>b</mark><p>{{b}}</p>
        <mark>c</mark><p>{{c}}</p>
        <mark>v-model测试:</mark><input v-model="b"><br>
        <mark>computed测试</mark><p>{{hello}}</p>
     </div>
    <br>
    <script>
            var vm=new Myvue({
                el:"#app",
                data:{
                    a:{a:"奇怪了"},
                    b:"双向绑定",
                    c:"computed实现了"
                },
                computed:{
                    hello()
                    {
                        return this.b+this.c;
                    }
                }
            });
          
    </script>
</body>
</html>